<template>
	<view>
		<view class="topnav">
			<uni-nav-bar :fixed="true" :title="item.title" leftIcon="left" @clickLeft="clickLeft"
				rightIcon="gear-filled" @clickRight="open"></uni-nav-bar>
		</view>
		<view class="contentBox">
			<view class="content" :style="{fontSize: textSize + 'px' }">
				<p v-for="(item,index) in dataList" :key="index">
					<image style="width: 750rpx;height: 90vh;" :src="item" mode="" lazy-load="true"></image>
				</p>
			</view>
			<view class="next">
				<view class="">
					<text>上一页</text>
				</view>
				<view class="">
					<text> 下一页</text>
				</view>
			</view>
		</view>
		
		
		
		<view class="popupBox">
			<uni-popup ref="popup" type="bottom">
				<view class="setting">
					<text @click="changeSize(-1)">-</text>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<text @click="changeSize(1)">+</text>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				textSize:18
			}
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
			this.searchContent()
		},
		onPullDownRefresh() {
			this.searchContent()
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			changeSize(i){
				this.textSize+=i
			},
			searchContent() {
				uni.request({
					url: `https://api.pingcc.cn/comicContent/search/${this.item.chapterId}`,
					method: "GET",
					success: ({
						data
					}) => {
						this.dataList = data.data
					},
					complete() {
						uni.stopPullDownRefresh()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.contentBox{
		padding-bottom: 50px;
	}
	.setting{
		height: 200rpx;
		background-color: aliceblue;
		font-size: 40rpx;
	}
	.next{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.next>view{
		padding: 5rpx 10px;
	}
</style>
